<template>
  <div class="front">
    <el-form class="login" ref="form" :model="form" leftlabel-width="120px" :rules="rules">
      <el-form-item prop="username">
        <template slot="label">
          <span style="color: #fff"><i class="el-icon-user"></i>用户名：</span>
        </template>
        <el-input v-model="form.username" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <template slot="label">
          <span style="color: #fff"><i class="el-icon-edit"></i>密码：</span>
        </template>
        <el-input v-model="form.password" placeholder="请输入用户密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button type="warning" plain @click="signUp">注册</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="注册账户" :visible.sync="signUpShow" width="500px">
      <el-form :model="sigunUpForm" ref="sigunUpForm" :rules="rule_check">
        <el-form-item prop="name">
          <template slot="label">
            <span><i class="el-icon-user"></i>用戶名：</span>
          </template>
          <el-input v-model="sigunUpForm.name" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <template slot="label">
            <span><i class="el-icon-warning"></i>密码：</span>
          </template>
          <el-input v-model="sigunUpForm.password" placeholder="请输入用户密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="passwordCheck">
          <template slot="label">
            <span><i class="el-icon-warning"></i>确认密码：</span>
          </template>
          <el-input v-model="sigunUpForm.passwordCheck" placeholder="请再次输入用户密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="bindPhone">
          <template slot="label">
            <span><i class="el-icon-phone"></i>绑定手机号：</span>
          </template>
          <el-input class="input-bindPhone" v-model="sigunUpForm.bindPhone" placeholder="请输入电话号码">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <div class="background">
      <img :src="imgSrc_bd" width="100%" height="100%" alt="" />
    </div>
    <!-- <div class="loginbg">
      <img :src="imgSrc_loginbg" width="100%" height="100%" alt="" />
    </div> -->
    <div class="title">
      <span>V2G能源交易系统</span>
    </div>
  </div>
</template>
<script>
import { userLogin, userRegister } from "@/api/user-manage";
export default {
  name: "login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户密码"));
      } else {
        if (this.sigunUpForm.password !== "") {
          this.$refs.sigunUpForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.sigunUpForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      imgSrc_bd: require("../../static/imgs/back2.jpeg"),
      imgSrc_loginbg: require("../assets/loginbg.jpeg"),
      signUpShow: false,
      sigunUpForm: {
        name: "",
        password: "",
        passwordCheck: "",
      },
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rule_check: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        address: [
          { required: true, message: "请输入用户地址", trigger: "blur" },
        ],
        password: [
          { validator: validatePass, trigger: "blur", required: true },
        ],
        passwordCheck: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
      },
    };
  },
  methods: {
    //登录按钮
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          userLogin(this.form).then((res) => {
            console.log("res", res);
            if (res && res.code === 200) {
              this.$router.push({
                path: "/home",
                query: { username: this.form.name },
              });
            }
          });
        } else {
          this.$message.error("请核验表单！");
        }
      });
    },
    signUp() {
      this.signUpShow = true;
    },
    handleCancel() {
      this.signUpShow = false;
    },
    //注册确认按钮
    handleConfirm() {
      this.$refs["sigunUpForm"].validate((valid) => {
        if (valid) {
          const reqBody = {
            username: this.sigunUpForm.name,
            password: this.sigunUpForm.password,
          };
          userRegister(reqBody).then((res) => {
            if (res && res.code === 200) {
              this.$message.success("注册成功！");
              this.signUpShow = false;
            } else {
              this.$message.error("注册失败！请联系开发人员");
            }
          });
        } else {
          this.$message.error("请核验表单！");
        }
      });
    },
  },
};
</script>
<style>
.background {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}

.login {
  left: 40%;
  top: 30%;
  position: absolute;
  width: 20%;
  height: 100;
}

.title {
  left: 43%;
  top: 20%;
  position: absolute;
  font-size: 28px;
  color: tomato;
  font-family: "Microsoft YaHei";
}

.input-bindPhone {
  /* margin-left: 0; */
  width: 90%px;
}
</style>
